import React, {Component} from 'react';
import {Image, StyleSheet, Text, TextInput, View} from 'react-native';

// 获取屏幕宽度
let Dimensions = require('Dimensions');
let { width } = Dimensions.get('window');

class LoginView extends Component {
	render() {
		return (
			<View style={styles.container}>
				{/*头像*/}
				<Image source={require('./../../img/pic.jpg')} style={styles.iconStyle}/>
				{/*输入框 -- 账号和密码*/}
				{/*underlineColorAndroid设置下划线透明*/}
				<TextInput underlineColorAndroid={'transparent'} placeholder={'请输入用户名'} style={styles.textInput}/>
				{/*secureTextEntry设置为密码框*/}
				<TextInput underlineColorAndroid={'transparent'} placeholder={'请输入密码'} secureTextEntry={true}
									 style={styles.textInput}/>
				{/*登陆*/}
				<View style={styles.loginBtnStyle}>
					<Text style={{color: 'white'}}>登陆</Text>
				</View>
				{/*设置*/}
				<View style={styles.settingStyle}>
					<Text>无法登陆</Text>
					<Text>新用户</Text>
				</View>
				{/*其他登陆方法*/}
				<View style={styles.otherLoginStyle}>
					<Text>其他登陆方式：</Text>
					<Image style={styles.otherImageStyle} source={require('./../../img/pic.jpg')}/>
					<Image style={styles.otherImageStyle} source={require('./../../img/pic.jpg')}/>
					<Image style={styles.otherImageStyle} source={require('./../../img/pic.jpg')}/>
				</View>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	container: {
		// 设置侧轴的对齐方式
		alignItems: 'center',
		flex: 1,
		backgroundColor: '#EEE'
	},
	iconStyle: {
		marginTop: 50,
		marginBottom: 30,
		width: 80,
		height: 80,
		borderRadius: 40,
		borderWidth: 1,
		borderColor: 'white',
	},
	textInput: {
		marginBottom: 1,
		textAlign: 'center',
		width: width,
		backgroundColor: 'white',
		height: 38
	},
	loginBtnStyle: {
		marginTop: 30,
		marginBottom: 30,
		justifyContent: 'center',
		borderRadius: 8,
		alignItems: 'center',
		backgroundColor: 'blue',
		width: width*0.8,
		height: 35
	},
	settingStyle: {
		width: width*0.95,
		// 设置两段对齐
		justifyContent: 'space-between',
		// 设置主轴方向
		flexDirection: 'row'
	},
	otherLoginStyle: {
		// 绝对定位
		position: 'absolute',
		bottom: 20,
		left: 20,
		// 设置侧轴对齐方式
		alignItems: 'center',
		// 设置主轴方向
		flexDirection: 'row',
	},
	otherImageStyle: {
		marginLeft: 8,
		borderRadius: 40,
		width: 60,
		height: 60
	}
});

// 输出类
module.exports = LoginView;